<template>
  <div>
	  <div class="navbar">
	    <div class="left-menu flex">
			<div class="logo">
				<img  :src="require('@/assets/logo.png')" alt="">
			</div>
	    </div>
	    <div class="right-menu">
	      <el-dropdown
	        class="avatar-container right-menu-item hover-effect" trigger="click">
	        <div class="avatar-wrapper">
	          {{user_name}}<i class="el-icon-arrow-down el-icon--right"></i>
	        </div>
	        <el-dropdown-menu slot="dropdown">
	          <el-dropdown-item @click.native="loginOut">
	            <span >退出</span>
	          </el-dropdown-item>
	        </el-dropdown-menu>
	      </el-dropdown>
	    </div>
	  	
	  </div>
	  <div class="drawer">
	  	<el-drawer
	  	   size="300px"
	  	   :with-header="false"
	  	  :visible.sync="drawer"
	  	  :direction="'rtl'">
	  	  <div>
	  		  <layOutSet @close="close"></layOutSet>
	  	  </div>
	  	</el-drawer>
	  </div>
	  
  </div>
  
</template>

<script>
import layOutSet from './layOutSet.vue'
export default {
  data() {
    return {
		out:true,
		drawer:false,
		fixedClass:'fixed-header-out',
		user_name:"",
    }
 },
 mounted() {
 	this.user_name=sessionStorage.getItem('user_name')
 },
 components:{
	 layOutSet
 },
 props:{
	
 },
  watch:{
	 out(newVal,oldVal){
		 if(newVal){
			 this.fixedClass = 'fixed-header-out'
		 }else{
			  this.fixedClass = 'fixed-header-in'
		 }
	 }, 
  },
  computed: {
    fixedHeader() {
      return this.$store.state.settings.fixedHeader
    },
	isKeep:{
		  get() {
			return this.$store.state.settings.isKeep
		  },
		  set(val) {
			this.$store.dispatch('settings/changeSetting', {
			  key: 'isKeep',
			  value: val
			})
		  }
	},
  },
  methods: {
	  close(){
		  this.drawer = false
	  },
     layout(){
		this.out = !this.out
		this.$emit('changeAsdBar',this.out)
	 },
	 loginOut(){
		 sessionStorage.clear()
		 this.$router.push('/')
	 },
  },
};
</script>

<style lang="scss" scoped>
	.logo{
			text-align: center;
			img{
				height: 30px;
				margin-left: 60px;
			}
		}

.navbar {
  height: 60px;
  overflow: hidden;
  background: rgb(34,43,69);
  .icon{
	  font-size: 20px;
	  margin-top: -2px;
	  margin-right: 20px;
	  cursor: pointer;
  }
   .left-menu{
	  position: relative;
	  top:17px;
	  left: 20px;
	  .no-redirect {
	    color: #97a8be;
	    cursor: text;
	  }
	  .redirect{
		  cursor: pointer;
	  }
   }
  .right-menu {
    float: right;
    height: 100%;
    position: relative;
    top:-15px;

    &:focus {
      outline: none;
    }
    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #fff;
      vertical-align: text-bottom;
	
      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        position: relative;
        font-size: 18px;
        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
